<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				width: 900px;
				height: 500px;
				background: #ccc;
				list-style: none;
				
				box-sizing: border-box;
				padding-top: 20px;
			}

			ul li {
				width: 150px;
				height: 100px;
				margin-left: 0;
				
				transition-property: margin-left;
				transition-delay: 1s;
				transition-duration: 6s;

			}

			ul li img {
				width: 150px;				
			}

			ul:hover li {
				margin-left: 750px;
			}

			ul li:nth-child(1) {
				transition-timing-function: linear;
			}

			ul li:nth-child(2) {
				transition-timing-function: ease;
			}

			ul li:nth-child(3) {
				transition-timing-function: ease-in;
			}

			ul li:nth-child(4) {
				transition-timing-function: ease-out;
			}

			ul li:nth-child(5) {
				transition-timing-function: ease-in-out;
			}
		</style>
	</head>
	<body>
		<!-- 
			1告诉系统延迟多少秒之后才开始过渡动画
			transition-delay: 2s;
			
			2告诉系统过渡动画的运动速度
			transition-timing-function: linear;(匀速)
			transition-timing-function: ease(以慢速开始，然后变快，然后慢速结束的过渡效果)
			transition-timing-function: ease-in(以慢速开始的过渡效果)
			transition-timing-function: ease-out(以慢速结束的过渡效果)
			transition-timing-function: ease-in-out(以慢速开始和结束的过渡效果)
		 -->
		<ul>
			<li><img src="img/乌龟.png" alt=""></li>
			<li><img src="img/乌龟.png" alt=""></li>
			<li><img src="img/乌龟.png" alt=""></li>
			<li><img src="img/乌龟.png" alt=""></li>
			<li><img src="img/乌龟.png" alt=""></li>
		</ul>

	</body>
</html>
